<template>
  <div id="driverStatistics" class="list">
    <div class="breadcrumb">
			<Breadcrumb separator=">">
				<BreadcrumbItem to="">司机视图</BreadcrumbItem>
				<BreadcrumbItem to="/driver/driverStatistics">司机统计</BreadcrumbItem>
			</Breadcrumb>
			<div class="btns">
				<ButtonGroup>
	        <Button type="text" @click="exportData"><i class="fa fa-download"></i><span>导出</span></Button>
	    	</ButtonGroup>
			</div>
		</div>

    <TableSearch>
      <Form :label-width="80">
        <Row :gutter="16">
          <Col :md="4">
            <ButtonGroup>
              <Button type="ghost" @click="changeType(1)" :class="{'active':searchType===1}" style="width:33%;">日</Button>
              <Button type="ghost" @click="changeType(2)" :class="{'active':searchType===2}" style="width:33%;">月</Button>
              <Button type="ghost" @click="changeType(3)" :class="{'active':searchType===3}" style="width:33%;">年</Button>
            </ButtonGroup>
          </Col>
          <Col :md="6">
            <FormItem label="统计日期">
              <DatePicker v-model="date" :type="datePickerType" :options="dataOption" :editable="false" :clearable="false" placeholder="统计日期" style="width:100%;"></DatePicker>
		        </FormItem>
          </Col>
          <Col :md="7">
            <FormItem label="选择车队">
              <Select v-model="orgIds" placeholder="请选择车队" clearable :multiple="true">
                <OrgTreeOption></OrgTreeOption>
              </Select>
		        </FormItem>
          </Col>
          <Col :md="7">
            <FormItem label="选择司机">
              <DriverComplete v-model="driverIds" :multiple="true"></DriverComplete>
		        </FormItem>
          </Col>
        </Row>
      </Form>
			<Button type="primary" class="search-btn" icon="search" @click="search" long>查询</Button>
		</TableSearch>

    <div class="main" style="position:relative;">
      <div class="table-content">
				<div class="table" style="margin:0;">
          <table>
						<thead>
							<th>统计合计</th>
							<th>行驶里程合计</th>
							<th>行驶时长合计</th>
							<th>不良操作行为合计</th>
							<th>不良驾驶行为合计</th>
							<th>违章数</th>
              <th>事故数</th>
              <th>平均综合安全指数</th>
              <th>平均疲劳驾驶时长</th>
              <th>平均情绪指数</th>
              <th>平均睡眠时长</th>
						</thead>
						<tbody>
							<tr v-for="(v,i) in totalData" :key="`driver-total-list-${i}`">
								<td>{{v.date}}</td>
                <td>{{v.mileage?mileage(v.mileage):'--'}}</td>
								<td>{{v.duration?time(v.duration,1,2):'--'}}</td>
								<td>{{v.badOpertion!==0?(v.badOpertion?`${v.badOpertion}次`:'--'):'0次'}}</td>
								<td>{{v.badDriveing!==0?(v.badDriveing?`${v.badDriveing}次`:'--'):'0次'}}</td>
								<td>{{v.totalWzTimes?`${v.totalWzTimes}次`:'--'}}</td>
								<td>{{v.accidentTimes?`${v.accidentTimes}次`:'--'}}</td>
								<td>{{v.avgSecurityIndex || '--'}}</td>
                <td>{{v.fatigueDrivingDuration?time(v.fatigueDrivingDuration,1,2):'--'}}</td>
                <td>{{v.sentimentScore || '--'}}</td>
                <td>{{v.sleepDuration?`${v.sleepDuration}小时`:'--'}}</td>
							</tr>
              <tr v-if="!isLoading && totalData.length <= 0">
                <td colspan="11">暂无数据</td>
              </tr>
						</tbody>
					</table>
				</div>
			</div>
      <div class="table-content">
				<div class="table">
					<table>
						<thead>
							<th>统计日期</th>
              <th>司机</th>
							<th>行驶里程</th>
							<th>行驶时长</th>
							<th>不良操作行为</th>
							<th>不良驾驶行为</th>
							<th>违章数</th>
              <th>事故数</th>
              <th>平均综合安全指数</th>
              <th>疲劳驾驶时长</th>
              <th>平均情绪指数</th>
              <th>平均睡眠时长</th>
						</thead>
						<tbody>
							<tr v-for="(v,i) in pageData.thisPageElements" :key="`driver-detail-list-${i}`">
								<td>{{v.date}}</td>
                <td>{{v.driverName}}</td>
                <td>{{v.mileage?mileage(v.mileage):'--'}}</td>
								<td>{{v.duration?time(v.duration,1,2):'--'}}</td>
								<td>{{v.badOpertion!==null?`${v.badOpertion}次`:'--'}}</td>
								<td>
                  <a v-if="v.badDriveing" @click="gotoAlarm(v)">{{v.badDriveing}}次</a>
                  <template v-else>--</template>
                </td>
								<td>{{v.totalWzTimes!==null?`${v.totalWzTimes}次`:'--'}}
                  <!-- <router-link v-if="v.totalWzTimes!==null" :to="{ name: 'violationList', query: {driverId:v.driverId,driverName:v.driverName} }">{{v.totalWzTimes}}次</router-link>
                  <template v-else>--</template> -->
                </td>
								<td>
                  <a v-if="v.accidentTimes!==null" @click="gotoAccident(v)">{{v.accidentTimes}}次</a>
                  <template v-else>--</template>
                </td>
								<td>{{v.avgSecurityIndex || '--'}}</td>
                <td>{{v.fatigueDrivingDuration?time(v.fatigueDrivingDuration,1,2):'--'}}</td>
                <td>{{v.sentimentScore || '--'}}</td>
                <td>{{v.sleepDuration?`${v.sleepDuration}小时`:'--'}}</td>
							</tr>
              <tr v-if="!isLoading && pageData.totalNumberOfElements <= 0">
                <td colspan="11">暂无数据</td>
              </tr>
						</tbody>
					</table>
				</div>
        <Page :total="pageData.totalNumberOfElements" :page-size="pageSize" :current="current" @on-change="loadPage" show-total></Page>
			</div>
      <Spin size="large" fix v-if="isLoading"></Spin>
    </div>

  </div>
</template>

<script>
	import {mapState,mapActions} from 'vuex'
  import moment from 'moment'
  import unit   from '@/util/unit'
  import {download} from '@/util/request'

  export default {
    mounted(){

    },
    data(){
      return {
        current:1,
        pageSize:15,
        searchType:1,
        date:moment().subtract(1,'d').toDate(),
        orgIds:[],
        driverIds:[],
        submitForm:{},
        dataOption:{
          disabledDate:(d)=>{
            return d > moment().subtract(1,'d').toDate();
          }
        }
      };
    },
    watch:{

    },
    computed:{
      ...mapState('base',['userinfo']),
      ...mapState('driver/driverStatistics',['pageData','totalData','isLoading']),
      datePickerType(){
        let t = 'date';
        switch(this.searchType){
          case 2: t = 'month'; break;
          case 3: t = 'year'; break;
        }
        return t;
      },
      dateVal(){
        let fmt = 'YYYY-MM-DD';
        switch(this.searchType){
          case 2: fmt = 'YYYY-MM'; break;
          case 3: fmt = 'YYYY'; break;
        }
        return moment(this.date).format(fmt);
      }
    },
    methods:{
      moment,
      time:unit.time,mileage:unit.mileage,
      ...mapActions('driver/driverStatistics',['reload']),
      changeType(v){
        this.searchType = v;
      },
      search(){
        this.submitForm = {orgIds:this.orgIds.join(','),date:this.dateVal,dateType:this.searchType,driverIds:this.driverIds.join(',')};
        this.loadPage(1);
      },
      loadPage(i){
        this.current = i;
        this.reload({pageNum:this.current,pageSize:this.pageSize,...this.submitForm});
      },
      exportData(){
        download('/driver/stat/export',this.submitForm);
      },
      gotoAccident(v){
        let query = {driverId:v.driverId,driverName:v.driverName};
        if (v.date.length === 10) {
          query.insertStime = v.date;
          query.insertEtime = v.date;
        }
        if (v.date.length === 7) {
          let mon = moment(v.date,'YYYY-MM');
          let d = mon.daysInMonth();
          let ed = moment(`${v.date}-${d}`).toDate();
          ed = ed <= moment().toDate() ? ed : moment().toDate();
          query.insertStime = mon.format('YYYY-MM-DD');
          query.insertEtime = moment(ed).format('YYYY-MM-DD');
        }
        if (v.date.length === 4) {
          let year = moment(v.date,'YYYY');
          query.insertStime = year.format('YYYY-MM-DD');
          let ed = year.add(1,'Y').subtract(1,'d').toDate();
          ed = ed <= moment().toDate() ? ed : moment().toDate();
          query.insertEtime = moment(ed).format('YYYY-MM-DD');
        }
        let router = {name:'accidentList',query};
        this.$router.push(router);
      },
      gotoAlarm(v){
        let query = {driverId:v.driverId,driverName:v.driverName};
        if (v.date.length === 10) {
          query.sTime = v.date;
          query.eTime = v.date;
        }
        if (v.date.length === 7) {
          let mon = moment(v.date,'YYYY-MM');
          let d = mon.daysInMonth();
          let ed = moment(`${v.date}-${d}`).toDate();
          ed = ed <= moment().toDate() ? ed : moment().toDate();
          query.sTime = mon.format('YYYY-MM-DD');
          query.eTime = moment(ed).format('YYYY-MM-DD');
        }
        if (v.date.length === 4) {
          let year = moment(v.date,'YYYY');
          query.sTime = year.format('YYYY-MM-DD');
          let ed = year.add(1,'Y').subtract(1,'d').toDate();
          ed = ed <= moment().toDate() ? ed : moment().toDate();
          query.eTime = moment(ed).format('YYYY-MM-DD');
        }
        let router = {name:'alarmInfo',query};
        this.$router.push(router);
      }
    },
    mounted(){
      let query = this.$route.query;
      if(query.orgIds){
        this.orgIds.push(query.orgIds);
      }
      this.search();
    }
  }
</script>
